<template>
    <div class="data-house">
        <h2 class="title">{{ $route.meta.title }}</h2>
        <div class="content">
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#9966FF',
                    backgroundImage: `url(${require('@/assets/images/icons/hospital-count.png')})`
                }"></div>
                <div class="label">医院总数：</div>
                <div class="value">{{ infoData.total }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#32BBFF',
                    backgroundImage: `url(${require('@/assets/images/icons/supervised-hospital.png')})`
                }"></div>
                <div class="label">监管医院：</div>
                <div class="value">{{ infoData.SupervisedHospital }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#FFBB34',
                    backgroundImage: `url(${require('@/assets/images/icons/warning-count.png')})`
                }"></div>
                <div class="label">预警项：</div>
                <div class="value">{{ infoData.warningCount }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#FF5500',
                    backgroundImage: `url(${require('@/assets/images/icons/drug-item.png')})`
                }"></div>
                <div class="label">药品项：</div>
                <div class="value">{{ infoData.drugItem }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#FF5500',
                    backgroundImage: `url(${require('@/assets/images/icons/physician.png')})`
                }"></div>
                <div class="label">医师数：</div>
                <div class="value">{{ infoData.physician }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#FFBB34',
                    backgroundImage: `url(${require('@/assets/images/icons/monitor-count.png')})`
                }"></div>
                <div class="label">监控数量：</div>
                <div class="value">{{ infoData.totalDepartment }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#9966FF',
                    backgroundImage: `url(${require('@/assets/images/icons/outpatient-count.png')})`
                }"></div>
                <div class="label">就诊总数：</div>
                <div class="value">{{ infoData.outpatientCount }}</div>
            </div>
            <div class="item">
                <div class="icon" :style="{
                    backgroundColor: '#4373F1',
                    backgroundImage: `url(${require('@/assets/images/icons/prescription.png')})`
                }"></div>
                <div class="label">处方数量：</div>
                <div class="value">{{ infoData.prescription }}</div>
            </div>
        </div>
    </div>
</template>
<script>
  import { listStatistics} from "@/api/his/statistics";
export default {
    name: 'DataHouse',
    data() {
        return {
            infoData: {
                total: 114,
                SupervisedHospital: 20,
                warningCount: 300,
                drugItem: 16,
                physician: 20,
                monitorCount: 400,
                totalDepartment: 400,
                outpatientCount: 144,
                prescription: 144,
            }
        }
    },
  created() {
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      listStatistics().then(response => {
        console.log(response)
        this.infoData.total = response.data.total;
        this.infoData.SupervisedHospital = response.data.SupervisedHospital;
        this.infoData.warningCount = response.data.warningCount;
        this.infoData.drugItem = response.data.drugItem;
        this.infoData.physician = response.data.physician;
        this.infoData.monitorCount = response.data.monitorCount;
        this.infoData.totalDepartment = response.data.totalDepartment;
        this.infoData.outpatientCount = response.data.outpatientCount;
        this.infoData.prescription = response.data.prescription;

      });
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 18px 0 24px;

    span {
        font-weight: 500;
        font-size: 18px;
        color: #4B4B4B;
        margin-left: 16px;
    }
}
.content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: -26px;
    margin-right: -31px;
    padding-right: 20px;

    .item {
        margin-top: 26px;
        display: flex;
        flex-direction: column;
        padding: 17px 20px 20px 110px;
        background: #FFFFFF;
        box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        height: 99px;
        flex-basis: 23%;
        margin-right: 31px;
        justify-content: space-between;
        position: relative;

        .label {
            color: #4C4C4C;
            font-size: 18px;
            font-weight: 500;
            line-height: 18px;
        }

        .value {
            font-weight: 500;
            font-size: 30px;
            color: #4C4C4C;
            line-height: 22px;
        }

        .icon {
            position: absolute;
            width: 66px;
            height: 66px;
            left: 24px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 20px;
            background-repeat: no-repeat;
            background-size: 30px 30px;
            background-position: center center;
        }
    }
}
</style>
